<template>
	<view class="content">
		<div class="notice">
			<image src="../../static/h.png" mode=""></image>[ 2020年课表已陆续更新 ]
		</div>
		<swiper :indicator-dots="true" :autoplay="true">
			<block v-for="(item,index) in banner" :key="index">
				<swiper-item @tap="switchTabCurriculum(index)">
					<image :src="item.url" mode=""></image>
				</swiper-item>
			</block>
		</swiper>

		<div class="kezx">
			<div class="title">-课程中心-</div>
			<div class="list">
				<div>
					<navigator url="gsjs">
						<i class="iconfont icontubiaozhizuomoban-2"></i>
						<p>公司介绍<br>师资介绍</p>
					</navigator>
				</div>
				<div @tap="switchTabCurriculum(0)">
					<i class="iconfont icontubiaozhizuomoban-"></i>
					<p>人才管理咨询</p>
				</div>
				<div @tap="switchTabCurriculum(3)">
					<i class="iconfont icontubiaozhizuomoban-4"></i>
					<p>领导力微课堂</p>
				</div>
				<div @tap="switchTabCurriculum(1)">
					<i class="iconfont icontubiaozhizuomoban-3"></i>
					<p>HPC人格教练</p>
				</div>
				<div @tap="switchTabCurriculum(2)">
					<i class="iconfont icontubiaozhizuomoban-1"></i>
					<p>领导力讲师认证</p>
				</div>
				<div @tap="switchTabCurriculum(4)">
					<i class="iconfont icontubiaozhizuomoban-4"></i>
					<p>测评产品</p>
				</div>
			</div>
		</div>

		<div class="kcap">
			<div class="title">-课程安排-</div>
			<div class="list">
				<div v-for="(item,index) in courselistcom" :key="index" @tap="goDetails(item.coursedid)">
					<h2>{{item.pname}}</h2>
					<div>
						<span>{{item.begintime}}</span>
						<span>{{item.duixiang}}</span>
						<span>地点：{{item.add}}</span>
					</div>
				</div>

			</div>
		</div>

		<div class="jstd">
			<div class="title">-讲师团队-</div>
			<scroll-view class="scroll-view_H" :scroll-x="coachlist.length>2?true:false">
				<div class="itemBox" :style="{width:300*5+'rpx'}">
					<div class='item' v-for="(item,index) in coachlist" :key="index">
						<navigator :url="'../mentorInfo/mentorInfo?cid='+item.id" hover-class="none">
							<image :src="item.head" mode=""></image>
							<div class="name">{{item.name}}</div>
							<view class="txt">{{item.desc}}</view>
						</navigator>
					</div>

				</div>
			</scroll-view>
		</div>

		<div class="jchg" v-if="video">
			<div class="title">-课程精彩回顾-</div>
			<video id="myVideo" :src="video" controls></video>
		</div>

		<quick />
	</view>
</template>

<script>
	import quick from '@/components/quick/index.vue'
	export default {
		components: {
			quick
		},
		data() {
			return {
				banner: [],
				courselistcom: '',
				coachlist: [],
				video: ''
			}
		},
		onLoad(option) {
			wx.showShareMenu({
				withShareTicket: true
			});
			if (option.maincode) {
				uni.setStorageSync('maincode', option.maincode);
			}
		},
		onLaunch: function() {
			wx.showShareMenu({
				withShareTicket: true,
				success: (res) => {
					console.log('showShareMenu----onload---success', res);
				},
				fail: () => {
					console.log('fail')
				}
			})

		},
		onShareAppMessage(e) {},
		mounted() {
			this.getBannerList()
			this.getCourselistcom()
			this.getCoachlist()
			this.getVideourl()
		},
		methods: {
			switchTabCurriculum(index) {
				uni.setStorageSync('activeIndex', index)
				uni.switchTab({
					url: "../curriculum/index"
				})
			},
			getBannerList() {
				this.$api('/Api/tcc/getBannerList.html').then(res => {
					this.banner = res
				})
			},
			getCourselistcom() {
				this.$api('/Api/tcc/getCourselistcom.html').then(res => {
					this.courselistcom = res
				})
			},
			goDetails(id) {
				uni.navigateTo({
					url: '/pages/curriculum/detailed?id=' + id
				})
			},
			getCoachlist() {
				this.$api('Api/tcc/getCoachlist').then(res => {
					this.coachlist = res
				})
			},
			getVideourl() {
				this.$api('api/tcc/getVideourl').then(res => {
					this.video = res
				})
			}
		}
	}
</script>

<style lang="less">
	.notice {
		padding: 0 68rpx;
		line-height: 100rpx;
		font-size: 24rpx;
		color: #666;

		image {
			width: 55rpx;
			height: 55rpx;
			vertical-align: middle;
			margin-right: 30rpx;
		}
	}

	swiper {
		height: 380rpx;

		navigator {
			width: 100%;
			height: 100%;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.kezx {
		.title {
			text-align: center;
			font-size: 30rpx;
			color: #666;
			line-height: 157rpx;
		}

		.list {
			padding: 0 90rpx;
			display: flex;
			flex-wrap: wrap;

			>div {
				text-align: center;
				display: inline-block;
				width: 50%;
				height: 240rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.27);
				padding-top: 40rpx;
				color: #666;

				&:nth-child(1) {
					.iconfont {
						margin-bottom: 10rpx;
					}
				}

				&:nth-child(odd) {
					border-right: 1rpx solid rgba(0, 0, 0, 0.27);
				}

				&:nth-last-child(1),
				&:nth-last-child(2) {
					border-bottom: none;
				}

				.iconfont {
					color: #005BAC;
					font-size: 80rpx;
					margin-bottom: 30rpx;
				}
			}
		}

	}

	.kcap {
		margin-top: 20rpx;
		background: #024C80;
		padding: 0 90rpx 40rpx;
		color: #fff;

		.title {
			text-align: center;
			font-size: 30rpx;
			color: #fff;
			line-height: 110rpx;
		}

		.list {
			>div {
				padding: 30rpx 0;
				border-top: 1px solid #42789F;
				line-height: 30rpx;

				h2 {
					font-weight: bold;
				}

				>div {
					span {
						display: inline-block;
						width: 33.33%;

						&:nth-child(2) {
							text-align: center;
						}

						&:nth-child(3) {
							text-align: right;
						}
					}
				}
			}
		}
	}

	.jstd {
		.title {
			text-align: center;
			font-size: 30rpx;
			color: #666;
			line-height: 125rpx;
		}

		scroll-view {
			width: 100%;
			overflow: hidden;
		}

		.itemBox {
			padding: 15rpx 0;
		}

		.item {
			display: inline-block;
			width: 280rpx;
			height: 640rpx;
			box-shadow: 0 0 15rpx 2rpx rgba(0, 0, 0, 0.2);
			border-radius: 30rpx;
			overflow: hidden;
			margin: 0 10rpx;

			image {
				width: 280rpx;
				height: 280rpx;
			}

			.name {
				font-weight: bold;
				color: #000;
				line-height: 60rpx;
				margin-top: 20rpx;
				text-align: center;
			}

			.txt {
				font-size: 18rpx;
				color: #989898;
				margin: 0 30rpx 10rpx;
			}
		}
	}

	.jchg {
		margin-top: 100rpx;
		text-align: center;
		padding-bottom: 30rpx;

		.title {
			text-align: center;
			font-size: 30rpx;
			color: #666;
			line-height: 125rpx;
		}

		#myVideo {
			width: 648rpx;
			height: 395rpx;
		}
	}
</style>
